<template>
  <t-dialog
    v-model:visible="visible"
    :close-on-esc-keydown="false"
    :close-on-overlay-click="false"
    :header="title"
    :footer="false"
    :width="800"
    class="common-dialog"
  >
    <div class="common-item-view">
      <div v-for="(item, index) in list" :key="index" class="item two">
        <div class="label" style="width: 100px">{{ item.label }}</div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>
  </t-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import _ from 'lodash';
import { nextTick, PropType, ref } from 'vue';

import { setKvViewData } from '@/utils';

import { INIT_FORM_LIST } from '../datas/detail';

const props = defineProps({
  title: {
    type: String as any,
    default: '弹框',
  },
  data: {
    type: Object as PropType<any>,
    default: () => {
      return {};
    },
  },
});

const visible = ref(false);
const list = ref(_.cloneDeep(INIT_FORM_LIST));

const close = () => {
  visible.value = false;
};

const open = async () => {
  visible.value = true;
  await nextTick();
  setData();
};

// 设置数据
const setData = () => {
  const changeData = {
    created_at: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
    updated_at: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
  };
  list.value = setKvViewData(list.value, { ...props.data, ...changeData });
};

defineExpose({ close, open });
</script>

<style lang="less" scoped></style>
